<template>
	<view class="list-right">
		<view class="author-img">
			<image class="img" src="../static/img/11485474214223046.jpg" mode=""></image>
			<view class="iconfont iconjiahao add" v-show="showIcon" @click="hide"></view>
		</view>
		<view class="iconfont iconaixin right-box" :style="color" @click="changeColor"></view>
		<view class="number">
			{{item.loveMunber}}
		</view>
		<view class="iconfont iconpinglun right-box"></view>
		<view class="number">
			{{item.commentNumber}}
		</view>
		<view class="iconfont iconfenxiang right-box"></view>
		<view class="number">
			{{item.shareNumber}}
		</view>
		<view class="around">
			<view class="iconfont iconyinle right-box"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"listRight",
		props:['item'],
		data() {
			return {
				showIcon:true,
				color:''
			};
		},
		methods:{
			hide(){
				this.showIcon = false;
			},
			changeColor(){
				this.color = this.color === "" ? "color:red;" : ""
			},
			change(){
				console.log(123)
				this.color = "color:red;"
			}
		}
	}
</script>

<style>
.list-right {
	color: #FFFFFF;
	width: 50%;
	margin: 0 auto;
}

.author-img {
	height: 50px;
	width: 50px;
	border-radius: 50%;
	border: 2px solid #FFFFFF;
	position: relative;
}

.img {
	height: 50px;
	width: 50px;
	border-radius: 50%;
}


.right-box {
	width: 50px;
	height: 40px;
	margin-top: 13px;
	text-align: center;
	line-height: 40px;
	color: #FFFFFF;
	font-size: 30px;
}

.number {
	font-size: 10px;
	text-align: center;
	color: #FFFFFF;
	width: 50px;
}

.around {
	margin-top: 15px;
	animation: rotate 1.5s linear 0.2s infinite;
	width: 50px;
	height: 50px;
}

@keyframes rotate{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}

.add {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: red;
	position: absolute;
	bottom: -9px;
	left: 16px;
	text-align: center;
	line-height: 18px;
	color: #FFFFFF;
	font-size: 10px;
}
</style>
